<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram Fig. 7.1</title>
</head>
<body>
<canvas id="circuitCanvas" width="550" height="400"></canvas>
<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.font = '20px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'black';

// --- Define coordinates ---
const v_x = 80;
const switch_a_x = 180;
const capacitor_x = 270;
const switch_b_x = 360;
const ammeter_x = 450;

const top_y = 100;
const switch_common_y = 150;
const capacitor_top_y = 200;
const capacitor_bottom_y = 240;
const bottom_y = 300;
const ammeter_y = 200;
const ammeter_r = 30;
const term_r = 5; // Radius for terminals

// --- Draw Voltage Source (V) ---
// Terminals
ctx.beginPath();
ctx.arc(v_x, top_y, term_r, 0, 2 * Math.PI); // Positive
ctx.stroke();
ctx.beginPath();
ctx.arc(v_x, bottom_y, term_r, 0, 2 * Math.PI); // Negative
ctx.stroke();
// Labels
ctx.fillText('+', v_x + 20, top_y);
ctx.fillText('−', v_x + 20, bottom_y);
ctx.fillText('V', v_x - 20, (top_y + bottom_y) / 2);
// Connecting wire for V source
ctx.beginPath();
ctx.moveTo(v_x, top_y + term_r);
ctx.lineTo(v_x, bottom_y - term_r);
ctx.stroke();

// --- Draw Switch (A, B) ---
// Terminals
ctx.beginPath();
ctx.arc(switch_a_x, top_y, term_r, 0, 2 * Math.PI); // A
ctx.stroke();
ctx.fillText('A', switch_a_x, top_y - 25);

ctx.beginPath();
ctx.arc(switch_b_x, top_y, term_r, 0, 2 * Math.PI); // B
ctx.stroke();
ctx.fillText('B', switch_b_x, top_y - 25);

ctx.beginPath();
ctx.arc(capacitor_x, switch_common_y, term_r, 0, 2 * Math.PI); // Common terminal
ctx.stroke();

// --- Draw Capacitor (C) ---
const cap_plate_w = 40;
// Plates
ctx.beginPath();
ctx.moveTo(capacitor_x - cap_plate_w, capacitor_top_y);
ctx.lineTo(capacitor_x + cap_plate_w, capacitor_top_y);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(capacitor_x - cap_plate_w, capacitor_bottom_y);
ctx.lineTo(capacitor_x + cap_plate_w, capacitor_bottom_y);
ctx.stroke();
// Label
ctx.fillText('C', capacitor_x + cap_plate_w + 20, (capacitor_top_y + capacitor_bottom_y) / 2);

// --- Draw Ammeter (A) ---
ctx.beginPath();
ctx.arc(ammeter_x, ammeter_y, ammeter_r, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillText('A', ammeter_x, ammeter_y);

// Ammeter Label
ctx.font = '16px Arial';
ctx.textAlign = 'left';
ctx.fillText('sensitive', ammeter_x + 40, ammeter_y - 25);
ctx.fillText('ammeter', ammeter_x + 40, ammeter_y - 8);
// Leader line for ammeter label
ctx.beginPath();
ctx.moveTo(ammeter_x + 38, ammeter_y - 15);
ctx.lineTo(ammeter_x + 20, ammeter_y - 10);
ctx.stroke();

// --- Draw Connecting Wires ---
ctx.beginPath();
// Top Left wire (V+ to A)
ctx.moveTo(v_x + term_r, top_y);
ctx.lineTo(switch_a_x - term_r, top_y);

// Top Right wire (B to Ammeter)
ctx.moveTo(switch_b_x + term_r, top_y);
ctx.lineTo(ammeter_x, top_y);
ctx.lineTo(ammeter_x, ammeter_y - ammeter_r);

// Bottom wire
ctx.moveTo(v_x + term_r, bottom_y);
ctx.lineTo(capacitor_x, bottom_y); 
ctx.moveTo(capacitor_x, bottom_y);
ctx.lineTo(ammeter_x, bottom_y);

// Capacitor connections
ctx.moveTo(capacitor_x, switch_common_y + term_r);
ctx.lineTo(capacitor_x, capacitor_top_y);
ctx.moveTo(capacitor_x, capacitor_bottom_y);
ctx.lineTo(capacitor_x, bottom_y);

// Ammeter bottom connection
ctx.moveTo(ammeter_x, ammeter_y + ammeter_r);
ctx.lineTo(ammeter_x, bottom_y);

ctx.stroke();

// --- Draw Junction Dot ---
const junction_dot_r = 4;
ctx.beginPath();
ctx.arc(capacitor_x, bottom_y, junction_dot_r, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();

// --- Figure Caption ---
ctx.font = 'bold 20px Arial';
ctx.textAlign = 'center';
ctx.fillStyle = 'black';
ctx.fillText('Fig. 7.1', 275, 360);

</script>
</body>
</html>